<template>
	<view>
		<view class="full" @click="closeFull"></view>

		<view class="login-out">
			<view><b>应急处理指南筛选条件</b></view>
			<!-- <view>工单日期范围</view> -->
			<view class="work-date">设备类型<view style='color:rgba(62, 58, 57, 0.7)' class="fr"  @click="show_date=true">{{ type_name == '' ? '请选择':type_name }}<image mode='aspectFit' src="/static/img/arrow.png" class="work-date-icon"></image></view></view>
			<view class="work-date">故障内容<input v-model="content" class="input" type='input' placeholder="请输入故障内容" /></view>

			<view class="btn"><button class="cancel-btn" @click="reset"><b>重置</b></button><button class="default-btn fr"
					@click="ok"><b>确定</b></button></view>
		</view>

		<view class="full full2" v-show="show_date"></view>
		<u-select v-model="show_date" :list="columns" label-name="text" @confirm="handleOk" @cancel="handleCacel"></u-select>
		<!-- <Picker v-show="show_date" show-toolbar title="设备" @confirm='handleOk' @cancel="handleCacel" :columns="columns" /> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show_date:false,
				columns: [],
				type_name : '',
				type_id : '',
				content:''
			}
		},
		created() {
			this.initType();
		},
		methods: {
			closeFull() {
				this.$emit('closeFull');
			},
			reset() {
				this.type_name = '';
				this.type_id = '';
				this.content = '';
			},
			handleCacel(e) {
				this.show_date = false;
			},
			handleOk(value) {
				this.type_id = value[0].extra;
				this.type_name = value[0].label;
			},
			ok(e) {
				let obj = {
					id: this.type_id,
					content: this.content
				}
				this.$emit('closeFull', obj);
			},
			initType() {
				this.fetch('GET',this.baseUrl()+'/home/queryEqtTypeTree2',{}).then((res)=>{
					if(res.returnCode == 1) {
						this.columns = res.data;
						this.columns.map((item)=>{
							item.extra = item.id;
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.login-out {
		padding: 26px 0 0 26px;
	}

	.login-out>view:nth-child(1) {
		color: #3E3A39;
		margin-bottom: 16px;
	}

	.login-out>view:nth-child(2) {
		color: #3E3A39;
		font-size: 14px;
		margin-bottom: 12px;
	}

	.work-date {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 50px;
		border-bottom: 1px solid #d7d7d7;
		color: #3E3A39;
		font-size: 14px;
		padding-right: 27px;
	}

	.input {
		height: 30px;
		width: 122px;
	}

	.work-date-icon {
		margin-left: 10px;
		width: 14px;
		height: 14px;
		vertical-align: middle;
	}

	.btn {
		position: absolute;
		width: 100%;
		bottom: 5%;
		left: 0;
		padding: 0 15px;
	}

	.default-btn,
	.cancel-btn {
		width: 47%;
		display: inline-block;
	}

	.full2 {
		z-index: 99;
	}
</style>
